<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <title>用户资料</title>
  <meta name="keywords" content="">
  <meta name="description" content="">
  <meta name="format-detection" content="telephone=no">
  <link rel="stylesheet" href="./layui/css/layui.css">
  <link rel="stylesheet" href="./css/style.css">
  <script type="text/javascript" src="js/jquery-2.0.3.min.js"></script>
  <script src="js/resize.js"></script>
</head>
<body class="layui-layout-body">
<div class="layui-layout layui-layout-admin">

  <div class="layui-header">
    <div class="layui-logo"><img src="images/logo.jpg" alt="思联画饰"></div>
    <!-- 头部区域（可配合layui已有的水平导航） -->
    <div class="nav-bar">
        <span>005859 | 广东富骏金控股权投资有限公司</span>
    </div>
    <ul class="layui-nav layui-layout-right">
      <li class="layui-nav-item serach">
        <a href="javascript:;">
          <img src="images/serach.jpg">
        </a>
      </li>
      <li class="layui-nav-item mess">
        <a href="javascript:;">
          <img src="images/mess.jpg">
        </a>
      </li>
      <li class="layui-nav-item">
        <a href="javascript:;" class="user">
          <img src="http://t.cn/RCzsdCq" class="layui-nav-img">
          <span class="username">JunieLuo.KK</span>
        </a>
        
      </li>
    </ul>
  </div>
  
  <div class="layui-side layui-bg-black">
    <a class="menu-btn" href="javascript:;"><i class="layui-icon layui-icon-spread-left" id="LAY_app_flexible"></i></a>
    <div class="layui-side-scroll">
      <!-- 左侧导航区域（可配合layui已有的垂直导航） -->
      <ul class="layui-nav layui-nav-tree"  lay-filter="test">
        <!-- <li class="layui-nav-item layui-nav-itemed" ><a href="javascript:;">首页</a></li> -->
        <li class="layui-nav-item">
          <a href="javascript:;">业务管理</a>
        </li>
        <li class="layui-nav-item">
          <a href="javascript:;">商品浏览</a>
        </li>
        <li class="layui-nav-item">
          <a href="javascript:;">销售管理</a>
          <dl class="layui-nav-child">
            <dd><a href="javascript:;">订单管理</a></dd>
            <dd><a href="javascript:;">购物清单</a></dd>
          </dl>
        </li>
        <li class="layui-nav-item">
          <a href="javascript:;">客户通讯录</a>
          <dl class="layui-nav-child">
            <dd><a href="javascript:;">群主管理</a></dd>
            <dd><a href="javascript:;">添加用户</a></dd>
          </dl>
        </li>
        <li class="layui-nav-item">
          <a href="javascript:;">统计及报告</a>
        </li>
      </ul>
      <a href="javascript:;" class="layui-btn layui-btn1">退出</a>
    </div>
  </div>
  
  <div class="layui-body show-info-block">
      <div class="info-item clearfix">
        <div class="info-item-1 info-item-left">
          <div class="title-block clearfix">
            <h3>用户资料</h3>
            <a href="#" class="layui-btn">编辑</a>
          </div>
          <div class="main-info">
              <div class="item clearfix">
                <div class="input-item input-item-1">克里斯蒂亚诺·罗纳尔多</div>
                <div class="input-item input-item-1">董事长</div>
              </div>

              <div class="item clearfix">
                <div class="input-item input-item-1">JunieLuo.JunieLuoKK@yahoo.com</div>
                <div class="input-item input-item-1 empty-sty">第二个电子邮箱</div>
                <div class="input-item input-item-1 input-item-last empty-sty">第三个电子邮箱</div>
              </div>

              <div class="line"></div>
              
              <div class="item clearfix">
                <div class="s-item-1">
                  <div class="dinput-item ipt-item-bottom">
                    +86(中国大陆)
                    <i class="layui-icon layui-icon-down"></i>
                  </div>
                  <div class="input-item input-item-2">1366230855555</div>
                </div>
                <div class="s-item-1">
                  <div class="dinput-item ipt-item-bottom">
                    +86(中国大陆)
                    <i class="layui-icon layui-icon-down"></i>
                  </div>
                  <div class="input-item input-item-2">1366230855555</div>
                </div>
                <div class="s-item-1 s-item-1-last">
                  <div class="dinput-item ipt-item-bottom">
                    +86(中国大陆)
                    <i class="layui-icon layui-icon-down"></i>
                  </div>
                  <div class="input-item input-item-2 empty-sty">第三个电话</div>
                </div>
            
              </div>

              <div class="item">
                  <div class="dinput-item dinput-item-1">
                    2020广州家具展
                    <i class="layui-icon layui-icon-down"></i>
                  </div>
              </div>
          </div>
        </div>
        <div class="info-item-1 info-item-right">
          <div class="title-block clearfix">
            <h3>公司信息</h3>
            <a href="#" class="layui-btn">编辑</a>
          </div>
          <div class="main-info">
              <div class="item clearfix">
                <div class="input-item input-item-last">公司名称</div>
              </div>

              <div class="item clearfix">
                <div class="input-item input-item-1">中国</div>
                <div class="input-item input-item-1">广州</div>
              </div>

              <div class="item clearfix">
                <div class="input-item input-item-last">详细地址</div>
              </div>

              <div class="line"></div>
              
              <div class="item clearfix">
                <div class="input-item input-item-1">电话1</div>
                <div class="input-item input-item-1">电话1</div>
                <div class="input-item input-item-1 input-item-last">电话1</div>
              </div>

              <div class="item clearfix">
                <div class="input-item input-item-last">邮箱地址</div>
              </div>
          </div>
        </div>
      </div>
        
      <div class="info-item">
        <div class="info-item-z info-item-zleft">
            <div class="layui-tab layui-tab-card">
              <ul class="layui-tab-title" style="position:relative;">
                <li class="layui-this" >用户喜爱的画饰
                  <a href="javascript:;" class="layui-tab-a layui-tab-a3" >更多</a>
                </li>
                <li>跟进情况
                <a href="javascript:;" class="layui-tab-a layui-tab-a2">添加</a>
                <a href="javascript:;" class="layui-tab-a layui-tab-a1">更多</a>
                </li>
              </ul>
              <div class="layui-tab-content" style="height: 100px;">
                <div class="layui-tab-item layui-show">
                  <table class="layui-table layui-table-1">
                    <thead>
                      <tr>
                        <th>创建时间</th>
                        <th>画饰编号</th>
                        <th>类型</th>
                        <th>预览图</th>
                      </tr> 
                    </thead>
                    <tbody>
                      <tr>
                        <td>2019-09-06 14:14:38</td>
                        <td>YH01259</td>
                        <td>思联版权画</td>
                        <td>
                          <img src="images/pr.png" alt="">  
                        </td>
                      </tr>
                      <tr>
                        <td>2019-09-06 14:14:38</td>
                        <td>YH01259</td>
                        <td>思联版权画</td>
                        <td>
                          <img src="images/pr.png" alt="">  
                        </td>
                      </tr>
                      <tr>
                        <td>2019-09-06 14:14:38</td>
                        <td>YH01259</td>
                        <td>思联版权画</td>
                        <td>
                          <img src="images/pr.png" alt="">  
                        </td>
                      </tr>
                      <tr>
                        <td>2019-09-06 14:14:38</td>
                        <td>YH01259</td>
                        <td>思联版权画</td>
                        <td>
                          <img src="images/pr.png" alt="">  
                        </td>
                      </tr>
                      <tr>
                        <td>2019-09-06 14:14:38</td>
                        <td>YH01259</td>
                        <td>思联版权画</td>
                        <td>
                          <img src="images/pr.png" alt="">  
                        </td>
                      </tr>
                    </tbody>
                  </table>
                </div>
                <div class="layui-tab-item">
                  <table class="layui-table layui-table-1 layui-table-2">
                    <thead>
                      <tr>
                        <th>创建时间</th>
                        <th>描述</th>
                      </tr> 
                    </thead>
                    <tbody>
                      <tr>
                        <td>2019-09-06 14:14:38</td>
                        <td>
                          <p>整个世界都被法国大选和马克龙霸占着，39岁的马克龙当选法国总统给世人带来</p>
                        </td>
                      </tr>
                      <tr>
                        <td>2019-09-06 14:14:38</td>
                        <td>
                          <p>整个世界都被法国大选和马克龙霸占着，39岁的马克龙当选法国总统给世人带来的震撼堪
                          比特普当选美国总统所带来的不可思议，他的当选被为是对民粹主义的一场胜利，纽约时</p>
                        </td>
                      </tr>
                      <tr>
                        <td>2019-09-06 14:14:38</td>
                        <td>
                          <p>整个世界都被法国大选和马克龙霸占着，39岁的马克龙当选法国总统给世人带来的震撼堪
                          比特普当选美国总统所带来的不可思议，他的当选被为是对民粹主义的一场胜利，纽约时</p>
                        </td>
                      </tr>
                      <tr>
                        <td>2019-09-06 14:14:38</td>
                        <td>
                          <p>整个世界都被法国大选和马克龙霸占着，39岁的马克龙当选法国总统给世人带来的震撼堪
                          比特普当选美国总统所带来的不可思议，他的当选被为是对民粹主义的一场胜利，纽约时</p>
                        </td>
                      </tr>
                      <tr>
                        <td>2019-09-06 14:14:38</td>
                        <td>
                          <p>整个世界都被法国大选和马克龙霸占着，39岁的马克龙当选法国总统给世人带来的震撼堪
                          比特普当选美国总统所带来的不可思议，他的当选被为是对民粹主义的一场胜利，纽约时</p>
                        </td>
                      </tr>
                    </tbody>
                  </table>
                </div>
              </div>
            </div>

        </div>
        <div class="info-item-z info-item-zright">
          <div class="title2-block clearfix">
            <h3>网站信息</h3>
            <ul>
                <li>注册时间: 2019-09-06 14:14:38</li>
                <li>最近登录: 2019-09-16 22:34:51</li>
            </ul>
          </div>
        </div>
      </div>
  </div>
  
</div>


<div class="ly-out edit-read-block" style="display:none">
  <div class="edit-read-title">
    <h3>跟进情况</h3>
    <p>当前时间: 2019年10月19日 12:39:48</p>
  </div>
  <div class="edit-read-cont">
    <h4>描述内容*</h4>
    <textarea name="" required lay-verify="required" placeholder="" class="layui-textarea"></textarea>
  </div>
  <div class="edit-read-btn">
    <button type="button" class="layui-btn">提交</button>
    <button type="button" class="layui-btn back-btn">返回</button>
  </div>
</div>

<script src="./layui/layui.js"></script>
<script>

$(document).on('click','.menu-btn',function(){
  if($(this).find('i').hasClass('layui-icon-shrink-right')){
    $(this).find('i').removeClass('layui-icon-shrink-right');
    $(this).find('i').addClass('layui-icon-spread-left');
    $('.layui-layout-admin .layui-side').animate({
      width:"0"
    },200);

    $('.layui-layout-admin .layui-logo').animate({
      width:"0"
    },200);

    $('.menu-btn').animate({
      left:"10"
    },200);
    $('.layui-layout-admin .layui-body').animate({
      left:"0"
    },200);
  }else{
    $(this).find('i').removeClass('layui-icon-spread-left');
    $(this).find('i').addClass('layui-icon-shrink-right');
    $('.layui-layout-admin .layui-side').animate({
      width:"200px"
    },200);

    $('.layui-layout-admin .layui-logo').animate({
      width:"200px"
    },200);

    $('.menu-btn').animate({
      left:"200px"
    },200);
    $('.layui-layout-admin .layui-body').animate({
      left:"200px"
    },200);
  }
})
//JavaScript代码区域
layui.use('element', function(){
  var element = layui.element;
  
});

//Demo
layui.use('form', function(){
  var form = layui.form;  
});

//修改记录
var layer;
layui.use('layer', function(){
  layer = layui.layer;

})

$(document).on('click','.info-item-zleft .layui-tab-a2',function(){
    layer.open({
      type: 1,
      title : '',
      skin: 'layui-layer-demo', //样式类名
      area: ['545px', '452px'],
      closeBtn: 0, //不显示关闭按钮
      anim: 2,
      shadeClose: true, //开启遮罩关闭
      content: $('.edit-read-block')
    });
})

$(document).on('click','.back-btn',function(){
    layer.closeAll();
})

</script>
</body>
</html>